component.timeline

timeline-mirror

Mirror Timeline

  • Now Task 08:00
    Image
    Adrian Demian
    adrian@ennovation.ie

    Added a new milestone named MosaicPro

  • Comment 11:00

    MosaicPro said: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an ...

  • 27may Photo 08:00
    Image
    Adrian Demian
    adrian@ennovation.ie

    Added photos to the album MosaicPro

<div class="widget widget-inverse">
	<div class="widget-head">
		<h4 class="heading"><i class="fa fa-sitemap fa-fw"></i> Mirror Timeline</h4>
	</div>
	<div class="widget-body padding-none">
		
		<div class="relativeWrap overflow-hidden">
		<div class="row row-merge layout-timeline layout-timeline-mirror">
			<div class="col-md-6"></div>
			<div class="col-md-6">
				<div class="innerAll">
					
					<ul class="timeline">
						<li class="active">
							<div class="separator bottom">
								<span class="date box-generic">Now</span>
								<span class="type glyphicons suitcase">Task <i></i><span class="time">08:00</span></span>
								<button type="button" class="btn btn-primary"><i class="fa fa-fw fa-plus-circle"></i> Add event</button>
							</div>
							<div class="widget widget-heading-simple widget-body-white margin-none">
								<div class="widget-body">
									<div class="media">
										<div class="media-object pull-left thumb"><img src="../assets//images/avatar-51x51.jpg" alt="Image" /></div>
										<div class="media-body">
											<a class="author">Adrian Demian</a><br/>
											<span class="muted">adrian@ennovation.ie</span>
										</div>
									</div>
									<div class="alert alert-gray">
										<p class="glyphicons circle_info margin-none"><i></i> Added a new milestone named <a href="">MosaicPro</a></p>
									</div>
									<a class="glyphicons single pencil"><i></i></a>
								</div>
							</div>
						</li>
						<li class="active">
							<span class="type glyphicons comments">Comment <i></i><span class="time">11:00</span></span>
							<div class="widget widget-heading-simple widget-body-white margin-none">
								<div class="widget-body">
									<p class="glyphicons user margin-none"><i></i> <strong><a href="">MosaicPro</a> said</strong>: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an ...</p>
								</div>
							</div>
						</li>
						<li>
							<div class="separator">
								<span class="date box-generic"><strong>27</strong>may</span>
								<span class="type glyphicons picture">Photo <i></i><span class="time">08:00</span></span>
							</div>
							<div class="widget widget-heading-simple widget-body-white margin-none">
								<div class="widget-body">
									<div class="media">
										<div class="media-object pull-left thumb"><img src="../assets//images/avatar-51x51.jpg" alt="Image" /></div>
										<div class="media-body">
											<a class="author">Adrian Demian</a><br/>
											<span class="muted">adrian@ennovation.ie</span>
										</div>
									</div>
									<div class="alert alert-gray">
										<p class="glyphicons circle_info"><i></i> Added photos to the album <a href="">MosaicPro</a></p>
										
										<!-- Gallery Layout -->
										<div class="gallery gallery-2 separator top">
											<ul class="row" data-toggle="modal-gallery" data-target="#modal-gallery" id="gallery-4" data-delegate="#gallery-4">
																								<li class="col-md-4 hidden-phone"><a class="thumb" href="../assets/images/gallery-2/6.jpg" data-gallery="gallery"><img src="../assets/images/gallery-2/6.jpg" alt="photo" class="img-responsive" /></a></li>
																								<li class="col-md-4 hidden-phone"><a class="thumb" href="../assets/images/gallery-2/5.jpg" data-gallery="gallery"><img src="../assets/images/gallery-2/5.jpg" alt="photo" class="img-responsive" /></a></li>
																								<li class="col-md-4 hidden-phone"><a class="thumb" href="../assets/images/gallery-2/4.jpg" data-gallery="gallery"><img src="../assets/images/gallery-2/4.jpg" alt="photo" class="img-responsive" /></a></li>
																								<li class="col-md-4"><a class="thumb" href="../assets/images/gallery-2/3.jpg" data-gallery="gallery"><img src="../assets/images/gallery-2/3.jpg" alt="photo" class="img-responsive" /></a></li>
																								<li class="col-md-4"><a class="thumb" href="../assets/images/gallery-2/2.jpg" data-gallery="gallery"><img src="../assets/images/gallery-2/2.jpg" alt="photo" class="img-responsive" /></a></li>
																								<li class="col-md-4"><a class="thumb" href="../assets/images/gallery-2/1.jpg" data-gallery="gallery"><img src="../assets/images/gallery-2/1.jpg" alt="photo" class="img-responsive" /></a></li>
																							</ul>
										</div>
										<!-- // Gallery Layout END -->
										
									</div>
									<a class="glyphicons single pencil"><i></i></a>
								</div>
							</div>
						</li>
					</ul>
					
				</div>
			</div>
		</div>
		</div>

	</div>
</div>



Code

@import "http://localhost/shared/components/modules/admin/gallery/blueimp-gallery/assets/lib/css/blueimp-gallery.min.css";
@import "http://localhost/shared/components/modules/admin/gallery/blueimp-gallery/assets/custom/blueimp-gallery.less";
@import "assets/components/modules/admin/timeline/assets/less/timeline.less";
@import "assets/components/modules/admin/tabs/assets/tabs.less";
@import "assets/components/modules/admin/ui/buttons/assets/buttons.less";
@import "assets/components/core/less/widgets.less";
@import "assets/components/core/less/gallery.less";
@import "assets/components/modules/admin/widgets/widget-generic/assets/widget-generic.less";

Usage

  1. Create a new LESS file (eg. styles.less)
  2. Copy & paste the above imports in the LESS file.
  3. Place the file in your project's document root.
  4. Load the LESS file into the <head> section of your HTML document, before any JavaScript files:

    <link type="stylesheet/less" href="styles.less" />

    NOTE  All the styles from the CORE package also need to be imported in this file, before the component imports.

  5. If you'd like to include other components on the same page, don't create multiple LESS files, but add all the imports in one file. You can create a LESS file for each page with just the resources used for that specific page, or you could create and use a single LESS file for the entire project.
  6. In production, compile the LESS file and use the resulting minified CSS file in the HTML document.

Scripts

BODY You should include the following scripts at the end of the HTML document, right before the closing </body> tag.

<script src="assets/components/modules/admin/gallery/blueimp-gallery/assets/lib/js/blueimp-gallery.min.js?v=v1.2.3"></script>
<script src="assets/components/modules/admin/gallery/blueimp-gallery/assets/lib/js/jquery.blueimp-gallery.min.js?v=v1.2.3"></script>

timeline-navigation

Timeline with Navigation

  • Now Task 08:00
    Image
    Adrian Demian
    adrian@ennovation.ie

    Added a new milestone named MosaicPro

  • Task 09:00
    Image
    Adrian Demian
    adrian@ennovation.ie

    Added a new milestone named MosaicPro

  • Comment 11:00

    MosaicPro said: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an ...

  • 27may Photo 08:00
    Image
    Adrian Demian
    adrian@ennovation.ie

    Added photos to the album MosaicPro

<div class="widget widget-inverse">
	<div class="widget-head">
		<h4 class="heading"><i class="fa fa-list fa-fw"></i> Timeline with Navigation</h4>
	</div>
	<div class="widget-body padding-none">
		
		<div class="row row-merge layout-timeline">
			<div class="col-md-4">
				<div class="innerAll">
				
					<div class="row margin-none innerT">
						<div class="col-md-7">
							<ul class="nav nav-pills nav-stacked nav-timeline">
								<li class="active"><a href="">Now</a></li>
								<li><a href="">Yesterday</a></li>
								<li><a href="">2 Weeks Ago</a></li>
								<li><a href="" class="glyphicons calendar">Custom<i></i></a></li>
							</ul>
						</div>
					</div>

				</div>
			</div>
			<div class="col-md-8">
				<div class="innerAll">
					
					<ul class="timeline">
						<li class="active">
							<div class="separator bottom">
								<span class="date box-generic">Now</span>
								<span class="type glyphicons suitcase">Task <i></i><span class="time">08:00</span></span>
								<button type="button" class="btn btn-primary"><i class="fa fa-fw fa-plus-circle"></i> Add event</button>
							</div>
							<div class="widget widget-heading-simple widget-body-white margin-none">
								<div class="widget-body">
									<div class="media">
										<div class="media-object pull-left thumb"><img src="../assets//images/avatar-51x51.jpg" alt="Image" /></div>
										<div class="media-body">
											<a class="author">Adrian Demian</a><br/>
											<span class="muted">adrian@ennovation.ie</span>
										</div>
									</div>
									<div class="alert alert-gray">
										<p class="glyphicons circle_info margin-none"><i></i> Added a new milestone named <a href="">MosaicPro</a></p>
									</div>
									<a class="glyphicons single pencil"><i></i></a>
								</div>
							</div>
						</li>
						<li class="active">
							<span class="type glyphicons suitcase">Task <i></i><span class="time">09:00</span></span>
							<div class="widget widget-heading-simple widget-body-white margin-none">
								<div class="widget-body">
									<div class="media">
										<div class="media-object pull-left thumb"><img src="../assets//images/avatar-51x51.jpg" alt="Image" /></div>
										<div class="media-body">
											<a class="author">Adrian Demian</a><br/>
											<span class="muted">adrian@ennovation.ie</span>
										</div>
									</div>
									<div class="alert alert-gray">
										<p class="glyphicons circle_info margin-none"><i></i> Added a new milestone named <a href="">MosaicPro</a></p>
									</div>
									<a class="glyphicons single pencil"><i></i></a>
								</div>
							</div>
						</li>
						<li class="active">
							<span class="type glyphicons comments">Comment <i></i><span class="time">11:00</span></span>
							<div class="widget widget-heading-simple widget-body-gray margin-none">
								<div class="widget-body">
									<p class="glyphicons user margin-none"><i></i> <strong><a href="">MosaicPro</a> said</strong>: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an ...</p>
								</div>
							</div>
						</li>
						<li>
							<div class="separator">
								<span class="date box-generic"><strong>27</strong>may</span>
								<span class="type glyphicons picture">Photo <i></i><span class="time">08:00</span></span>
							</div>
							<div class="widget widget-heading-simple widget-body-white margin-none">
								<div class="widget-body">
									<div class="media">
										<div class="media-object pull-left thumb"><img src="../assets//images/avatar-51x51.jpg" alt="Image" /></div>
										<div class="media-body">
											<a class="author">Adrian Demian</a><br/>
											<span class="muted">adrian@ennovation.ie</span>
										</div>
									</div>
									<div class="alert alert-gray">
										<p class="glyphicons circle_info"><i></i> Added photos to the album <a href="">MosaicPro</a></p>
										
										<!-- Gallery Layout -->
										<div class="gallery gallery-2 separator top">
											<ul class="row" data-toggle="modal-gallery" data-target="#modal-gallery" id="gallery-4" data-delegate="#gallery-4">
																								<li class="col-md-3 hidden-phone"><a class="thumb" href="../assets/images/gallery-2/6.jpg" data-gallery="gallery"><img src="../assets/images/gallery-2/6.jpg" alt="photo" class="img-responsive" /></a></li>
																								<li class="col-md-3 hidden-phone"><a class="thumb" href="../assets/images/gallery-2/5.jpg" data-gallery="gallery"><img src="../assets/images/gallery-2/5.jpg" alt="photo" class="img-responsive" /></a></li>
																								<li class="col-md-3 hidden-phone"><a class="thumb" href="../assets/images/gallery-2/4.jpg" data-gallery="gallery"><img src="../assets/images/gallery-2/4.jpg" alt="photo" class="img-responsive" /></a></li>
																								<li class="col-md-3"><a class="thumb" href="../assets/images/gallery-2/3.jpg" data-gallery="gallery"><img src="../assets/images/gallery-2/3.jpg" alt="photo" class="img-responsive" /></a></li>
																								<li class="col-md-3"><a class="thumb" href="../assets/images/gallery-2/2.jpg" data-gallery="gallery"><img src="../assets/images/gallery-2/2.jpg" alt="photo" class="img-responsive" /></a></li>
																								<li class="col-md-3"><a class="thumb" href="../assets/images/gallery-2/1.jpg" data-gallery="gallery"><img src="../assets/images/gallery-2/1.jpg" alt="photo" class="img-responsive" /></a></li>
																							</ul>
										</div>
										<!-- // Gallery Layout END -->
										
									</div>
									<a class="glyphicons single pencil"><i></i></a>
								</div>
							</div>
						</li>
					</ul>
					
				</div>
			</div>
		</div>

	</div>
</div>


Code

@import "http://localhost/shared/components/modules/admin/gallery/blueimp-gallery/assets/lib/css/blueimp-gallery.min.css";
@import "http://localhost/shared/components/modules/admin/gallery/blueimp-gallery/assets/custom/blueimp-gallery.less";
@import "assets/components/modules/admin/timeline/assets/less/timeline.less";
@import "assets/components/modules/admin/tabs/assets/tabs.less";
@import "assets/components/modules/admin/ui/buttons/assets/buttons.less";
@import "assets/components/core/less/widgets.less";
@import "assets/components/core/less/gallery.less";
@import "assets/components/modules/admin/widgets/widget-generic/assets/widget-generic.less";
@import "assets/components/modules/admin/widgets/widget-stats/assets/less/widget-stats.less";

Usage

  1. Create a new LESS file (eg. styles.less)
  2. Copy & paste the above imports in the LESS file.
  3. Place the file in your project's document root.
  4. Load the LESS file into the <head> section of your HTML document, before any JavaScript files:

    <link type="stylesheet/less" href="styles.less" />

    NOTE  All the styles from the CORE package also need to be imported in this file, before the component imports.

  5. If you'd like to include other components on the same page, don't create multiple LESS files, but add all the imports in one file. You can create a LESS file for each page with just the resources used for that specific page, or you could create and use a single LESS file for the entire project.
  6. In production, compile the LESS file and use the resulting minified CSS file in the HTML document.

Scripts

BODY You should include the following scripts at the end of the HTML document, right before the closing </body> tag.

<script src="assets/components/modules/admin/gallery/blueimp-gallery/assets/lib/js/blueimp-gallery.min.js?v=v1.2.3"></script>
<script src="assets/components/modules/admin/gallery/blueimp-gallery/assets/lib/js/jquery.blueimp-gallery.min.js?v=v1.2.3"></script>

timeline-orders

<div class="row row-merge margin-none border-bottom border-top layout-timeline">
	<div class="col-md-3">
		<div class="innerAll">
		
			<div class="row margin-none">
				<div class="col-md-8">
					<ul class="nav nav-pills nav-stacked nav-timeline">
						<li class="active"><a href="">Now</a></li>
						<li><a href="">Yesterday</a></li>
						<li><a href="">2 Weeks Ago</a></li>
						<li><a href="" class="glyphicons calendar">Custom<i></i></a></li>
					</ul>
					<div class="separator bottom"></div>
					
					<!-- Stats Widget -->
<a href="" class="widget-stats widget-stats-2">
	<span class="count">30</span>
	<span class="txt">Bookings</span>
</a>
<!-- // Stats Widget END -->

					<!-- Stats Widget -->
<a href="" class="widget-stats widget-stats-gray widget-stats-1">
	<span class="glyphicons cart_in"><i></i><span class="txt">Sales</span></span>
	<div class="clearfix"></div>
	<span class="count">20</span>
</a>
<!-- // Stats Widget END -->

					
				</div>
			</div>

		</div>
	</div>
	<div class="col-md-9">
		<div class="innerAll">
			
			<ul class="timeline">
				<li class="active">
					<div class="separator bottom">
						<span class="date box-generic">Now</span>
						<span class="type glyphicons cart_in">&nbsp; <i></i><span class="time">08:00</span></span>
					</div>
					<div class="row">
						<div class="col-md-6">
							<div class="widget widget-heading-simple widget-body-white">
								<div class="widget-body">
									<p><a class="author">John Doe</a><br/><span class="muted">doe@johny.com</span></p>
									<div class="alert alert-gray">
										<p class="glyphicons circle_info margin-none"><i></i> Booked &dollar;499.99 for <a href="">Secret Meeting</a></p>
									</div>
									<a class="glyphicons single pencil"><i></i></a>
								</div>
							</div>
							<div class="widget widget-heading-simple widget-body-white margin-none">
								<div class="widget-body">
									<p><a class="author">John Doe</a><br/><span class="muted">doe@johny.com</span></p>
									<div class="alert alert-gray">
										<p class="glyphicons circle_info margin-none"><i></i> Booked &dollar;499.99 for <a href="">Secret Meeting</a></p>
									</div>
									<a class="glyphicons single pencil"><i></i></a>
								</div>
							</div>
						</div>
						<div class="col-md-6">
							<div class="widget widget-heading-simple widget-body-white margin-none">
								<div class="widget-body">
									<p><a class="author">John Doe</a><br/><span class="muted">doe@johny.com</span></p>
									<div class="alert alert-gray">
										<div class="gallery">
											<ul class="row">
																								<li class="col-md-3 padding-none"><a class="thumb" href="../front/shop_product.html?lang=en"><img src="../assets/images/fashion/female/1.jpg" alt="photo" class="img-responsive" /></a></li>
																								<li class="col-md-3 padding-none"><a class="thumb" href="../front/shop_product.html?lang=en"><img src="../assets/images/fashion/female/2.jpg" alt="photo" class="img-responsive" /></a></li>
																								<li class="col-md-3 padding-none"><a class="thumb" href="../front/shop_product.html?lang=en"><img src="../assets/images/fashion/female/3.jpg" alt="photo" class="img-responsive" /></a></li>
																								<li class="col-md-3 padding-none"><a class="thumb" href="../front/shop_product.html?lang=en"><img src="../assets/images/fashion/female/4.jpg" alt="photo" class="img-responsive" /></a></li>
																							</ul>
										</div>
										<p class="glyphicons circle_info margin-none"><i></i> Ordered &dollar;1299.09 worth of <a href="../front/shop_product.html?lang=en">Lorem Ipsum Dolor</a></p>
									</div>
									<a class="glyphicons single pencil"><i></i></a>
								</div>
							</div>
						</div>
					</div>
				</li>
				<li class="active">
					<span class="type glyphicons credit_card">&nbsp; <i></i><span class="time">09:00</span></span>
					<div class="widget widget-heading-simple widget-body-white margin-none">
						<div class="widget-body">
							<p><a class="author">Jane Doe</a><br/><span class="muted">doe@jane.com</span></p>
							<div class="alert alert-gray">
								<p class="glyphicons circle_info margin-none"><i></i> Paid &dollar;399.99 with Credit card for <a href="">Secret Meeting</a></p>
							</div>
							<a class="glyphicons single pencil"><i></i></a>
						</div>
					</div>
				</li>
				<li>
					<div class="separator">
						<span class="date box-generic"><strong>25</strong>june</span>
						<span class="type glyphicons cart_in">&nbsp; <i></i><span class="time">08:00</span></span>
					</div>
					<div class="widget widget-heading-simple widget-body-white margin-none">
						<div class="widget-body">
							<div class="media">
								<div class="media-object pull-left thumb"><img src="../assets//images/avatar-51x51.jpg" alt="Image" /></div>
								<div class="media-body">
									<a class="author">John Doe</a><br/>
									<span class="muted">doe@notaperson.com</span>
								</div>
							</div>
							<div class="alert alert-gray">
								<div class="gallery">
									<ul class="row">
																				<li class="col-md-2 padding-none"><a class="thumb" href="../front/shop_product.html?lang=en"><img src="../assets/images/fashion/female/1.jpg" alt="photo" class="img-responsive" /></a></li>
																				<li class="col-md-2 padding-none"><a class="thumb" href="../front/shop_product.html?lang=en"><img src="../assets/images/fashion/female/2.jpg" alt="photo" class="img-responsive" /></a></li>
																				<li class="col-md-2 padding-none"><a class="thumb" href="../front/shop_product.html?lang=en"><img src="../assets/images/fashion/female/3.jpg" alt="photo" class="img-responsive" /></a></li>
																				<li class="col-md-2 padding-none"><a class="thumb" href="../front/shop_product.html?lang=en"><img src="../assets/images/fashion/female/4.jpg" alt="photo" class="img-responsive" /></a></li>
																				<li class="col-md-2 padding-none"><a class="thumb" href="../front/shop_product.html?lang=en"><img src="../assets/images/fashion/female/5.jpg" alt="photo" class="img-responsive" /></a></li>
																				<li class="col-md-2 padding-none"><a class="thumb" href="../front/shop_product.html?lang=en"><img src="../assets/images/fashion/female/6.jpg" alt="photo" class="img-responsive" /></a></li>
																			</ul>
								</div>
								<p class="glyphicons circle_info margin-none"><i></i> Ordered &dollar;1299.09 worth of <a href="../front/shop_product.html?lang=en">Lorem Ipsum Dolor</a></p>
							</div>
							<a class="glyphicons single pencil"><i></i></a>
						</div>
					</div>
				</li>
			</ul>
			
		</div>
	</div>
</div>


Code

@import "assets/components/modules/admin/widgets/widget-stats/assets/less/widget-stats.less";
@import "http://localhost/shared/components/modules/admin/gallery/blueimp-gallery/assets/lib/css/blueimp-gallery.min.css";
@import "http://localhost/shared/components/modules/admin/gallery/blueimp-gallery/assets/custom/blueimp-gallery.less";
@import "assets/components/modules/admin/timeline/assets/less/timeline.less";
@import "assets/components/modules/admin/tabs/assets/tabs.less";
@import "assets/components/modules/admin/ui/buttons/assets/buttons.less";
@import "assets/components/core/less/widgets.less";
@import "assets/components/core/less/gallery.less";
@import "assets/components/modules/admin/widgets/widget-generic/assets/widget-generic.less";

Usage

  1. Create a new LESS file (eg. styles.less)
  2. Copy & paste the above imports in the LESS file.
  3. Place the file in your project's document root.
  4. Load the LESS file into the <head> section of your HTML document, before any JavaScript files:

    <link type="stylesheet/less" href="styles.less" />

    NOTE  All the styles from the CORE package also need to be imported in this file, before the component imports.

  5. If you'd like to include other components on the same page, don't create multiple LESS files, but add all the imports in one file. You can create a LESS file for each page with just the resources used for that specific page, or you could create and use a single LESS file for the entire project.
  6. In production, compile the LESS file and use the resulting minified CSS file in the HTML document.

Scripts

BODY You should include the following scripts at the end of the HTML document, right before the closing </body> tag.

<script src="assets/components/modules/admin/gallery/blueimp-gallery/assets/lib/js/blueimp-gallery.min.js?v=v1.2.3"></script>
<script src="assets/components/modules/admin/gallery/blueimp-gallery/assets/lib/js/jquery.blueimp-gallery.min.js?v=v1.2.3"></script>

timeline-widget

View all
<div class="row">
	<div class="col-md-12">
		
		<!-- Timeline Widget -->
		<div class="widget-timeline">
			<ul class="list-timeline">
				
												<!-- Item -->
				<li>
					<span class="date">21/03</span>
					<span class="glyphicons activity-icon user_add"><i></i></span>
					<span class="ellipsis"><a href="">Jane Doe</a> registered at <a href="">Jane Doe's</a> suggestion.</span>
					<div class="clearfix"></div>
				</li>
				<!-- // Item END -->
								<!-- Item -->
				<li>
					<span class="date">21/03</span>
					<span class="glyphicons activity-icon user_add"><i></i></span>
					<span class="ellipsis"><a href="">John Doe</a> registered at <a href="">Jane Doe's</a> suggestion.</span>
					<div class="clearfix"></div>
				</li>
				<!-- // Item END -->
								<!-- Item -->
				<li>
					<span class="date">21/03</span>
					<span class="glyphicons activity-icon user_add"><i></i></span>
					<span class="ellipsis"><a href="">Jane Doe</a> registered at <a href="">Jane Doe's</a> suggestion.</span>
					<div class="clearfix"></div>
				</li>
				<!-- // Item END -->
								<!-- Item -->
				<li>
					<span class="date">21/03</span>
					<span class="glyphicons activity-icon user_add"><i></i></span>
					<span class="ellipsis"><a href="">Melisa Ragae</a> registered at <a href="">Melisa Ragae's</a> suggestion.</span>
					<div class="clearfix"></div>
				</li>
				<!-- // Item END -->
								<!-- Item -->
				<li>
					<span class="date">21/03</span>
					<span class="glyphicons activity-icon user_add"><i></i></span>
					<span class="ellipsis"><a href="">Darius Jackson</a> registered at <a href="">Martin Glades's</a> suggestion.</span>
					<div class="clearfix"></div>
				</li>
				<!-- // Item END -->
								<!-- Item -->
				<li>
					<span class="date">21/03</span>
					<span class="glyphicons activity-icon user_add"><i></i></span>
					<span class="ellipsis"><a href="">Martin Glades</a> registered at <a href="">Martin Glades's</a> suggestion.</span>
					<div class="clearfix"></div>
				</li>
				<!-- // Item END -->
								
			</ul>
			<a href="" class="btn btn-primary view-all">View all</a>
		</div>
		<!-- Timeline Widget END -->
		
	</div>
</div>


Code

@import "http://localhost/shared/components/modules/admin/timeline/assets/less/widget-timeline.less";
@import "assets/components/modules/admin/ui/buttons/assets/buttons.less";

Usage

  1. Create a new LESS file (eg. styles.less)
  2. Copy & paste the above imports in the LESS file.
  3. Place the file in your project's document root.
  4. Load the LESS file into the <head> section of your HTML document, before any JavaScript files:

    <link type="stylesheet/less" href="styles.less" />

    NOTE  All the styles from the CORE package also need to be imported in this file, before the component imports.

  5. If you'd like to include other components on the same page, don't create multiple LESS files, but add all the imports in one file. You can create a LESS file for each page with just the resources used for that specific page, or you could create and use a single LESS file for the entire project.
  6. In production, compile the LESS file and use the resulting minified CSS file in the HTML document.

timeline-medical-patient-history

<ul class="timeline-activity list-unstyled">
	<li>
		<i class="list-icon fa fa-scissors"></i>
		<div class="block">
			<div class="caret"></div>
			<div class="box-generic bg-primary-light">
				<div class="timeline-top-info border-bottom">
					<a href="" class="text-regular">Upcoming procedure</a> <span class="text-muted2">(consectetur adipisicing elit)</span> with <i class="fa fa-stethoscope text-primary"></i> <a href="">Dr. Dignissimos</a>
				</div>
				<div class="innerAll half inline-block">
					<i class="fa fa-clock-o text-primary"></i> 17:00 &nbsp;
					<i class="fa fa-calendar text-primary"></i> 3 October 2013
				</div>
			</div>
			<div class="separator bottom"></div>
		</div>
	</li>
	<li>
		<i class="list-icon fa fa-stethoscope"></i>
		<div class="block">
			<div class="caret"></div>
			<div class="box-generic">
				<div class="timeline-top-info border-bottom">
					<a href="" class="text-regular">Consultation</a> with <i class="fa fa-stethoscope"></i> <a href="">Dr. Dignissimos</a>
				</div>
				<div class="innerAll half inline-block">
					<i class="fa fa-clock-o"></i> 10:00 &nbsp;
					<i class="fa fa-calendar"></i> 2 October 2013
				</div>
			</div>
			<div class="separator bottom"></div>
		</div>
		<div class="block block-inline">
			<div class="box-generic">
				<div class="innerT innerR">
					<button class="btn btn-primary btn-xs pull-right"><i class="fa fa-download"></i></button>
					<div class="media inline-block margin-none">
						<div class="innerLR">
							<i class="fa fa-stethoscope pull-left text-primary fa-2x"></i>
							<div class="media-body">
								<div><a href="" class="strong text-regular">Lab Test Results</a></div>
								<span>1 MB</span>
							</div>
							<div class="clearfix"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="block block-inline">
			<div class="box-generic">
				<div class="innerT innerR">
					<button class="btn btn-primary btn-xs pull-right"><i class="fa fa-eye"></i></button>
					<div class="media inline-block margin-none">
						<div class="innerLR">
							<i class="fa fa-file-text-o pull-left text-primary fa-2x"></i>
							<div class="media-body">
								<div><a href="" class="strong text-regular">Notes</a></div>
								<span>24 KB</span>
							</div>
							<div class="clearfix"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</li>
</ul>

Code

@import "http://localhost/shared/components/modules/admin/gallery/blueimp-gallery/assets/lib/css/blueimp-gallery.min.css";
@import "http://localhost/shared/components/modules/admin/gallery/blueimp-gallery/assets/custom/blueimp-gallery.less";
@import "assets/components/modules/admin/timeline/assets/less/timeline.less";
@import "assets/components/modules/admin/tabs/assets/tabs.less";
@import "assets/components/modules/admin/ui/buttons/assets/buttons.less";
@import "assets/components/core/less/widgets.less";
@import "assets/components/core/less/gallery.less";
@import "assets/components/modules/admin/widgets/widget-generic/assets/widget-generic.less";

Usage

  1. Create a new LESS file (eg. styles.less)
  2. Copy & paste the above imports in the LESS file.
  3. Place the file in your project's document root.
  4. Load the LESS file into the <head> section of your HTML document, before any JavaScript files:

    <link type="stylesheet/less" href="styles.less" />

    NOTE  All the styles from the CORE package also need to be imported in this file, before the component imports.

  5. If you'd like to include other components on the same page, don't create multiple LESS files, but add all the imports in one file. You can create a LESS file for each page with just the resources used for that specific page, or you could create and use a single LESS file for the entire project.
  6. In production, compile the LESS file and use the resulting minified CSS file in the HTML document.

Scripts

BODY You should include the following scripts at the end of the HTML document, right before the closing </body> tag.

<script src="assets/components/modules/admin/gallery/blueimp-gallery/assets/lib/js/blueimp-gallery.min.js?v=v1.2.3"></script>
<script src="assets/components/modules/admin/gallery/blueimp-gallery/assets/lib/js/jquery.blueimp-gallery.min.js?v=v1.2.3"></script>

timeline-work-history

<ul class="timeline-activity list-unstyled">
	<li class="active">
		<i class="list-icon fa fa-share"></i>
		<div class="block block-inline">
			<div class="caret"></div>
			<div class="box-generic">
				<div class="timeline-top-info content-filled border-bottom">
					<i class="fa fa-user"></i> <a href="">Bill</a> got a review for <a href="" class="text-primary">FLAT PLUS UI Interface Design</a> from <a href="#"><img src="../assets/images/people/80/8.jpg" alt="photo" width="20"></a> <a href="">Andrew M.</a>
					<div class="timeline-bottom">
						<i class="fa fa-clock-o"></i> 2 days ago 
					 
					</div>
				</div>
				<div class="media innerAll margin-none">
			        <a class="pull-left" href="#"><img src="../assets/images/people/80/8.jpg" alt="photo" class="media-object" width="35"></a>
			        <div class="media-body">
			          	<a href="" class="strong">Andrew</a> Good Job. Congrats and hope to see more admin templates like this in the future.
		     			<div class="timeline-bottom">
							<i class="fa fa-clock-o"></i> 2 days ago  
						</div>
			        </div>
			    </div>
		    
			</div>
			
		</div>
	</li>

	<li>
		<i class="list-icon fa fa-share"></i>
		<div class="block block-inline">
			<div class="caret"></div>
			<div class="box-generic">
				<div class="timeline-top-info content-filled border-bottom">
					<i class="fa fa-user"></i> <a href="">Bill</a> got a review for <a href="" class="text-primary">Support &amp; Ticket System</a> from <a href="#"><img src="../assets/images/people/80/20.jpg" alt="photo" width="20"></a> <a href="">Andrew M.</a>
					<div class="timeline-bottom">
						<i class="fa fa-clock-o"></i> 2 days ago 
					 
					</div>
				</div>
				<div class="media innerAll margin-none">
			        <a class="pull-left" href="#"><img src="../assets/images/people/80/20.jpg" alt="photo" class="media-object" width="35"></a>
			        <div class="media-body">
			          	<a href="" class="strong">Bogdan</a> Good Job. Congrats and hope to see more admin templates like this in the future.
		     			<div class="timeline-bottom">
							<i class="fa fa-clock-o"></i> 2 days ago  
						</div>
			        </div>
			    </div>
		    
			</div>
			
		</div>
	</li>

	<li>
		<i class="list-icon fa fa-share"></i>
		<div class="block block-inline">
			<div class="caret"></div>
			<div class="box-generic">
				<div class="timeline-top-info content-filled border-bottom">
					<i class="fa fa-user"></i> <a href="">Bill</a> got a review for <a href="" class="text-primary">Project Management</a> from <a href="#"><img src="../assets/images/people/80/12.jpg" alt="photo" width="20"></a> <a href="">Andrew M.</a>
					<div class="timeline-bottom">
						<i class="fa fa-clock-o"></i> 2 days ago 
					 
					</div>
				</div>
				<div class="media innerAll margin-none">
			        <a class="pull-left" href="#"><img src="../assets/images/people/80/12.jpg" alt="photo" class="media-object" width="35"></a>
			        <div class="media-body">
			          	<a href="" class="strong">John </a> Good Job. Congrats and hope to see more admin templates like this in the future.
		     			<div class="timeline-bottom">
							<i class="fa fa-clock-o"></i> 2 days ago  
						</div>
			        </div>
			    </div>
		    
			</div>
			
		</div>
	</li>

	<li>
		<i class="list-icon fa fa-share"></i>
		<div class="block block-inline">
			<div class="caret"></div>
			<div class="box-generic">
				<div class="timeline-top-info content-filled border-bottom">
					<i class="fa fa-user"></i> <a href="">Bill</a> got a review for <a href="" class="text-primary">FLAT PLUS UI Interface Design</a> from <a href="#"><img src="../assets/images/people/80/10.jpg" alt="photo" width="20"></a> <a href="">Andrew M.</a>
					<div class="timeline-bottom">
						<i class="fa fa-clock-o"></i> 2 days ago 
					 
					</div>
				</div>
				<div class="media innerAll margin-none">
			        <a class="pull-left" href="#"><img src="../assets/images/people/80/10.jpg" alt="photo" class="media-object" width="35"></a>
			        <div class="media-body">
			          	<a href="" class="strong">Andrew</a> Good Job. Congrats and hope to see more admin templates like this in the future.
		     			<div class="timeline-bottom">
							<i class="fa fa-clock-o"></i> 2 days ago  
						</div>
			        </div>
			    </div>
		    
			</div>
			
		</div>
	</li>

</ul>

Code

@import "http://localhost/shared/components/modules/admin/gallery/blueimp-gallery/assets/lib/css/blueimp-gallery.min.css";
@import "http://localhost/shared/components/modules/admin/gallery/blueimp-gallery/assets/custom/blueimp-gallery.less";
@import "assets/components/modules/admin/timeline/assets/less/timeline.less";
@import "assets/components/modules/admin/tabs/assets/tabs.less";
@import "assets/components/modules/admin/ui/buttons/assets/buttons.less";
@import "assets/components/core/less/widgets.less";
@import "assets/components/core/less/gallery.less";
@import "assets/components/modules/admin/widgets/widget-generic/assets/widget-generic.less";

Usage

  1. Create a new LESS file (eg. styles.less)
  2. Copy & paste the above imports in the LESS file.
  3. Place the file in your project's document root.
  4. Load the LESS file into the <head> section of your HTML document, before any JavaScript files:

    <link type="stylesheet/less" href="styles.less" />

    NOTE  All the styles from the CORE package also need to be imported in this file, before the component imports.

  5. If you'd like to include other components on the same page, don't create multiple LESS files, but add all the imports in one file. You can create a LESS file for each page with just the resources used for that specific page, or you could create and use a single LESS file for the entire project.
  6. In production, compile the LESS file and use the resulting minified CSS file in the HTML document.

Scripts

BODY You should include the following scripts at the end of the HTML document, right before the closing </body> tag.

<script src="assets/components/modules/admin/gallery/blueimp-gallery/assets/lib/js/blueimp-gallery.min.js?v=v1.2.3"></script>
<script src="assets/components/modules/admin/gallery/blueimp-gallery/assets/lib/js/jquery.blueimp-gallery.min.js?v=v1.2.3"></script>